import React from 'react';
import { Modal, Card, Row, Divider } from 'antd';
import moment from 'moment';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

export default class DetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { modalVisible, handleModalVisible, detailInfo } = this.props;

    return (
      <Modal
        width={1200}
        title="报价单详情"
        visible={modalVisible}
        footer={null}
        onCancel={() => handleModalVisible(false)}
        destroyOnClose
      >
        <DescriptionList style={{ marginBottom: 24 }}>
          <Description term="报价单名称">{detailInfo.quoName || '--'}</Description>
          <Description term="签约方">{detailInfo.suppName || '--'}</Description>
          <Description term="合同名称">{detailInfo.contName || '--'}</Description>
          <Description term="客户名称">{detailInfo.custName || '--'}</Description>
          <Description term="服务类型">{detailInfo.serTypeName || '--'}</Description>
          <Description term="状态">{detailInfo.quoStateName || '--'}</Description>
          <Description term="是否含税">{detailInfo.taxFlagName || '--'}</Description>
          {detailInfo.taxFlag === '2' ? (
            <Description term="税率">{`${detailInfo.taxRatio}%`}</Description>
          ) : (
            <div />
          )}
          <Description term="创建人">{detailInfo.creName || '--'}</Description>
          <Description term="创建时间">
            {moment(detailInfo.creTime).format('YYYY-MM-DD HH:mm') || '--'}
          </Description>
        </DescriptionList>
        <Row>
          {detailInfo.packList &&
            detailInfo.packList.map(pack => (
              <Card style={{ width: '100%' }}>
                {pack.listQuoPd &&
                  pack.listQuoPd.map(item => (
                    <DescriptionList>
                      <Description term="产品名称">{item.pdName}</Description>
                      {item.listAttr.map(attr => (
                        <Description key={attr.specifAttrId} term={attr.attrName}>
                          {attr.name}
                        </Description>
                      ))}
                    </DescriptionList>
                  ))}
                {pack.priceList.length ? <Divider /> : null}
                {pack.priceList &&
                  pack.priceList.map(item => (
                    <DescriptionList>
                      <Description term="执行地区">{item.areaName || '--'}</Description>
                      <Description term="报价金额">
                        {item.quotePrice === 0 ? 0 : item.quotePrice || '--'}
                      </Description>
                      {item.taxMoney == null ? (
                        <div />
                      ) : (
                        <Description term="税金">{item.taxMoney || '--'}</Description>
                      )}
                    </DescriptionList>
                  ))}
              </Card>
            ))}
        </Row>
      </Modal>
    );
  }
}
